<template>
  <div class="home">
    <EditorHeader />
    <div class="home__title">Todo List</div>
    <EditorUserInput />
    <EditorList />
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
    EditorUserInput: () =>
      import(
        /* webpackChunkName: "EditorUserInput" */ '@/components/editor-user-input'
      ),
    EditorHeader: () =>
      import(
        /* webpackChunkName: "EditorUserInput" */ '@/components/editor-header'
      ),
    EditorList: () =>
      import(/* webpackChunkName: "EditorList" */ '@/components/editor-list')
  }
}
</script>

<style lang="less">
.home {
  width: 100%;
  &__title {
    font-size: 2rem;
    color: #fff;
    font-family: fangsong;
    font-weight: 700;
  }
  .ant-btn:hover,
  .ant-btn:focus {
    color: rgb(0, 0, 0);
    border-color: #be8a28;
    background: #be8a28;
  }
  .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
    border-color: #000000;
    border-right-width: 1px !important;
  }
  .ant-btn {
    background: #be8a28;
    color: rgb(0, 0, 0);
    border-color: #be8a28;
  }
}

@media (max-width: 599px) {
}
</style>
